import { Row, Col } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { useGetProcessNumber } from '../../useHooks/getProcessNumber';
import { TextWidget } from '@inbiz/react';
import { handleClick } from '../../utils';
import './index.less';

export default (props: { customfontsize: any; dynamicdata: any; userInfo: any; page: any; horizontalgap?: any; verticalgap?: any; isChange: any; processGroup: any; rangeConfig: any; getProcessCenterNumber: any; }) => {
  const {
    customfontsize,
    dynamicdata,
    userInfo,
    page,
    horizontalgap,
    verticalgap,
    isChange,
    processGroup,
    rangeConfig,
    getProcessCenterNumber,
  } = props;
  const mydynamicdata = useGetProcessNumber(dynamicdata, userInfo, isChange, rangeConfig, processGroup, getProcessCenterNumber);
  const pageRoute = page ? page.split(',')[0] : '';

  return (
    <>
      <BizHeader {...props} />

      <BizBody {...props}>
        <div className="inbiz-processIndexCard" style={{ paddingBottom: horizontalgap }}>
          <Row gutter={[verticalgap, horizontalgap]}>
            {mydynamicdata.map((item: any) => {
              return (
                <Col
                  key={item.id}
                  span={item.gridNum * 2}
                  style={{
                    height: item.gridHeight,
                    fontSize: customfontsize,
                    // marginRight: 15,
                    // color: '#fff',
                  }}
                  onClick={() => handleClick(item, pageRoute)}
                >
                  <div className="colContainer" style={{ background: item.blockBackgroundColor }}>
                    <div className="textInfo">
                      <div
                        style={{ color: item.hintNumberColor, fontSize: item.hintNumberFontSize }}
                      >
                        {item.count ?? '0'}
                      </div>
                      <div style={{ color: item.titleColor }}>
                        <TextWidget>{item.title}</TextWidget>
                      </div>
                    </div>
                    <div style={{ position: 'relative' }}>
                      {item.icon?.type && (
                        <InbizIcon
                          type={item.icon?.type}
                          style={{
                            fontSize: item.icon?.size || 40,
                            color: item.icon?.color,
                            position: 'absolute',
                            bottom: 0,
                            right: 0,
                          }}
                        />
                      )}
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </BizBody>
    </>
  );
};
